import React,{Component} from 'react'
// 导入样式
import './css/04-组件的样式.css'

class App extends Component{
    render(){
        var myname="海绵宝宝"
        var style1={
            background:"yellow",
            // 2、需要驼峰写法
            fontSize:"30px"
        }
        return(
            ///1、在组件内部要让一段逻辑执行，需要加上{}花括号，{}可以加变量，三元运算符等等
            <div >
               组件的样式：计算{10+20}
               <p>name:{myname}</p>
               <div style={style1}>react内行样式</div>
               <div style={{color:"red"}}>react内行样式</div>
               {/* 3、class类名要改成className */}
               <p className='style2'>导入的组件样式</p>
               {/*4、 标签里面的for属性要改为htmlFor */}
               <label htmlFor ="name">用户名：</label>
               <input type="text" id='name'></input>
               {// 5、react推荐我们使用行内样式，因为react觉得每一个组件都是一个独立的整体 
               }
            </div>
        )
    }
}
export default App